/** This class creates a ui table element. */
import $ from "jquery";
import Backbone from "backbone";
import Utils from "utils/utils";
var View = Backbone.View.extend({
    initialize: function(options) {
        this.options = Utils.merge(options, {
            content: "No content available.",
            onchange: null,
            ondblclick: null,
            onconfirm: null,
            cls: "grid",
            selectable: true
        });
        this.setElement(this._template());
        this.$thead = this.$("thead");
        this.$tbody = this.$("tbody");
        this.$tmessage = this.$("tmessage");
        this.row = $("<tr/>");
        this.row_count = 0;
    },

    events: {
        click: "_onclick",
        dblclick: "_ondblclick"
    },

    /** Add cell to header row */
    addHeader: function($el) {
        this.row.append($("<th/>").append($el));
    },

    /** Append header row to table */
    appendHeader: function() {
        this.$thead.append(this.row);
        this.row = $("<tr/>");
    },

    /** Add cell to row */
    add: function($el, width, align) {
        var wrapper = $("<td/>");
        if (width) {
            wrapper.css("width", width);
        }
        if (align) {
            wrapper.css("text-align", align);
        }
        this.row.append(wrapper.append($el));
    },

    /** Append row to table */
    append: function(id, fade) {
        this._commit(id, fade, false);
    },

    /** Prepend row to table */
    prepend: function(id, fade) {
        this._commit(id, fade, true);
    },

    /** Helper to get row element */
    get: function(id) {
        return this.$(`#${id}`);
    },

    /** Delete row by id */
    del: function(id) {
        var item = this.$tbody.find(`#${id}`);
        if (item.length > 0) {
            item.remove();
            this.row_count--;
            this._refresh();
        }
    },

    /** Delete all rows */
    delAll: function() {
        this.$tbody.empty();
        this.row_count = 0;
        this._refresh();
    },

    /** Set a value i.e. selects/highlights a particular row by id */
    value: function(new_value) {
        if (this.options.selectable) {
            this.before = this.$tbody.find(".current").attr("id");
            if (new_value !== undefined) {
                this.$tbody.find("tr").removeClass("current");
                if (new_value) {
                    this.$tbody.find(`#${new_value}`).addClass("current");
                }
            }
            var after = this.$tbody.find(".current").attr("id");
            if (after === undefined) {
                return null;
            } else {
                if (after != this.before && this.options.onchange) {
                    this.options.onchange(new_value);
                }
                return after;
            }
        }
    },

    /** Return the number of rows */
    size: function() {
        return this.$tbody.find("tr").length;
    },

    /** Helper to append rows */
    _commit: function(id, fade, prepend) {
        this.del(id);
        this.row.attr("id", id);
        if (prepend) {
            this.$tbody.prepend(this.row);
        } else {
            this.$tbody.append(this.row);
        }
        if (fade) {
            this.row.hide();
            this.row.fadeIn();
        }
        this.row = $("<tr/>");
        this.row_count++;
        this._refresh();
    },

    /** Handles onclick events */
    _onclick: function(e) {
        var old_value = this.value();
        var new_value = $(e.target)
            .closest("tr")
            .attr("id");
        if (new_value != "") {
            if (new_value && old_value != new_value) {
                if (this.options.onconfirm) {
                    this.options.onconfirm(new_value);
                } else {
                    this.value(new_value);
                }
            }
        }
    },

    /** Handles ondblclick events */
    _ondblclick: function(e) {
        var value = this.value();
        if (value && this.options.ondblclick) {
            this.options.ondblclick(value);
        }
    },

    /** Refresh helper */
    _refresh: function() {
        if (this.row_count == 0) {
            this.$tmessage.show();
        } else {
            this.$tmessage.hide();
        }
    },

    /** Template */
    _template: function() {
        return `<div><table class="${this.options.cls}"><thead/><tbody/></table><tmessage>${this.options.content}</tmessage><div>`;
    }
});

export default {
    View: View
};
